<script setup lang="ts">
import {getNameList} from "@/api/namespace/index.js";
import {CrawlNamespaceNameVO} from "@/api/namespace/types.js";
import {ref} from "vue";
import {DialogModeEnum} from "@/enums/DialogModeEnum";

const emit = defineEmits(['on-select'])
const props = defineProps({
	defNsCode: {
		type: String,
		default: '',
	},
	opMode: {
		type: Number,
		default: DialogModeEnum.CLOSE
	}
})

const nameList = ref<CrawlNamespaceNameVO[]>();
const selectedNsCode = ref('')

/**
 * 查询名称列表
 */
function nameListQuery() {
	getNameList()
			.then(({data}) => {
				nameList.value = data;
			})
			.finally(() => {
			});
}

function onSelect(nsCode: string) {
	emit('on-select', nsCode)
}

onMounted(() => {
	nameListQuery();
})

function reset() {
	selectedNsCode.value = ''
}

defineExpose({reset})
</script>

<template>
	<el-form-item label="空间编码">
		<el-select
				v-if="opMode !== DialogModeEnum.EDIT"
				v-model="selectedNsCode"
				@change="onSelect"
				placeholder="请选择"
				filterable
				clearable>
			<el-option
					v-for="item in nameList"
					:key="item.nsCode"
					:label="item.nsName"
					:value="item.nsCode">
				<span style="float: left">{{ item.nsName }}</span>
				<span style="float: right; color: #8492a6; font-size: 12px">{{ item.nsCode }}</span>
			</el-option>
		</el-select>
		<el-input
				style="width: 50%;"
				v-else
				:disabled="true"
				v-model="selectedNsCode"
				:placeholder="defNsCode"/>
	</el-form-item>
</template>
